"use server";
import { getServicesApi } from "@/api/customservice";
import { Link } from "@/i18n/routing";
import { getTranslations } from "next-intl/server";
import Form from "../components/Form";
import GoogleCom from "../components/GoogleCom";

const Login = async () => {
    const t = await getTranslations("LoginPage");
    const services = await getServicesApi();
    console.log(`🚀🚀🚀🚀🚀-> in page.tsx on 11`, services);
    const defaultService = services?.filter((item) => item.register_show === 1);

    return (
        <>
            <GoogleCom />
            <Form type={"login"} />
            <div className={"text-center"}>
                <span className={"mr-[20px] text-[14px] text-[#fff]"}>{t("childTips")}</span>
                <span className={"iconfont icon-a-18 text-[red]"}></span>
            </div>

            <div
                className={`absolute bottom-[0.84rem] right-[0.12rem] z-50 flex w-[0.6944rem] flex-col items-center justify-center`}
            >
                {defaultService &&
                    defaultService.map((item, index) => (
                        <Link
                            key={index}
                            href={item.url}
                            className={
                                "flex h-[0.54rem] w-[0.54rem] items-center justify-center rounded-[50%]" +
                                " bg-gradient-to-t from-[#ff611b] to-[#ffcf35]"
                            }
                            target={"_blank"}
                        >
                            <img
                                className={"h-[0.3889rem] w-[0.3889rem] object-contain"}
                                src={item.icon_url}
                                alt={""}
                            ></img>
                        </Link>
                    ))}
            </div>
        </>
    );
};

export default Login;
